<template>
  <div class="AssetCatalog">
    <!-- 头部文字描述开始 -->
    <div class="title_text">资产目录</div>
    <!-- 头部文字描述结束 -->
    <div class="dDownMain">
      <div
        class="twoBox"
        :style="this.$route.query.Token ? 'top:50px;left:10px' : 'top: 100px'"
      >
        <div class="dLeftMain">
          <div>
            <div style="margin-bottom: 5px">
              <span style="margin-left: 5px">关键字：</span>
              <el-input
                size="mini"
                style="width: 50%"
                v-model="value_a"
                clearable
              ></el-input>
              <el-button
                style="margin-left: 15px"
                size="mini"
                icon="el-icon-search"
                @click="search_a"
              ></el-button>
              <el-button
                size="mini"
                icon="el-icon-plus"
                @click="
                  (dialogVisible_a = true),
                    (formLabelAlign_a.ParentCode = ''),
                    (flag_a = 1)
                "
              ></el-button>
            </div>
            <div>
              <el-tree
                :data="datalist"
                :props="defaultProps"
                @node-click="handleNodeClick"
                :expand-on-click-node="tree_click"
                accordion
                :default-expanded-keys="idTree"
                node-key="Id"
                v-loading="isLoading"
                style="width: 100%; overflow-y: auto; height: 700px"
                :highlight-current="true"
              >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <!-- data.title -->
                  <span
                    style="
                      display: inline-block;
                      padding-right: 60px;
                      width: 150px;
                    "
                    >{{ data.Code + "  " + data.Name }}</span
                  >
                  <span style="margin-left: 30px">
                    <el-button
                      type="text"
                      size="mini"
                      @click="() => addjgTJ(node, data)"
                      >新增下一级</el-button
                    >
                    <el-button
                      type="text"
                      size="mini"
                      icon="el-icon-edit"
                      @click="() => edit(node, data)"
                    ></el-button>
                    <el-button
                      type="text"
                      size="mini"
                      icon="el-icon-delete"
                      @click="() => remove(node, data)"
                    ></el-button>
                  </span>
                </span>
              </el-tree>
            </div>
          </div>
        </div>
        <div class="dRightMain">
          <template>
            <div style="margin-bottom: 5px">
              <span>关键字：</span>
              <el-input
                size="mini"
                style="width: 15%"
                v-model="value_b"
                clearable
              ></el-input>
              <el-button
                style="margin-left: 15px"
                size="mini"
                icon="el-icon-search"
                @click="search_b"
              ></el-button>
              <el-button
                size="mini"
                icon="el-icon-plus"
                @click="open_b"
              ></el-button>
              <el-button size="mini" @click="toYes">人工核验</el-button>
            </div>
            <el-table
              :data="tableData"
              style="width: 100%"
              height="700px"
              v-loading="isLoading_a"
              class="table_cls"
              :row-style="rowClass"
              @selection-change="handleSelectionChange"
            >
              <el-table-column width="60" type="selection"> </el-table-column>
              <el-table-column prop="AssetCode" label="类目标识">
              </el-table-column>
              <el-table-column prop="AssetName" label="类目名称">
              </el-table-column>
              <el-table-column prop="Version" label="版本号"> </el-table-column>
              <el-table-column prop="Sort" label="排序"> </el-table-column>
              <el-table-column prop="FormName" label="数据表说明" width="100">
              </el-table-column>
              <el-table-column prop="TableName" label="数据表">
              </el-table-column>
              <el-table-column prop="FieldName" label="字段名">
              </el-table-column>
              <el-table-column
                prop="InternalCode"
                label="内部标识符"
                width="100"
              >
              </el-table-column>
              <el-table-column
                prop="DataGroupCode"
                label="临床数据组标识"
                width="160"
              >
              </el-table-column>
              <el-table-column
                prop="DataGroupName"
                label="临床数据组"
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="ElementCode"
                label="数据元标识符"
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="ElementName"
                label="数据元名称"
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="Define"
                label="定义"
                show-overflow-tooltip
                width="180"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="DataType" label="数据类型" width="120">
              </el-table-column>
              <el-table-column prop="Format" label="表示格式" width="120">
              </el-table-column>
              <el-table-column prop="AllowValue" label="允许值" width="120">
              </el-table-column>
              <el-table-column prop="CodoCode" label="值域代码" width="120">
              </el-table-column>
              <el-table-column prop="MatchStatus" label="核验状态" width="100">
                <template slot-scope="scope">
                  {{
                    scope.row.MatchStatus == 0
                      ? "待核验"
                      : scope.row.MatchStatus == 1
                      ? "已核验"
                      : "未知状态"
                  }}
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                width="120"
                align="center"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button
                    icon="el-icon-edit"
                    size="mini"
                    @click="edit_b(scope.row)"
                  ></el-button>
                  <el-button
                    icon="el-icon-delete"
                    size="mini"
                    @click="delete_b(scope.row.Code)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <!-- 页码切换 -->
          <div class="block" style="text-align: center">
            <el-pagination
              layout="prev, pager, next"
              :total="TotalCount"
              :current-page="page.page"
              :page-size="page.limit"
              @current-change="change_list"
            >
            </el-pagination>
          </div>
        </div>
        <!-- 弹层开始 -->
        <el-dialog
          :title="
            this.flag_a == 1 ? '新增' : this.flag_a == 2 ? '修改' : '未知操作'
          "
          :visible.sync="dialogVisible_a"
          width="30%"
          :before-close="handleClose_a"
          :modal-append-to-body="false"
          :close-on-click-modal="false"
        >
          <el-form label-width="80px" :model="formLabelAlign_a">
            <el-form-item
              label="父级类目标识"
              label-width="100px"
              v-if="formLabelAlign_a.ParentCode != ''"
            >
              <el-input
                :disabled="true"
                v-model="
                  formLabelAlign_a.ParentCode + '  ' + formLabelAlign_a.Name_a
                "
              >
              </el-input>
            </el-form-item>
            <el-form-item label="类目标识" label-width="100px">
              <el-input v-model="formLabelAlign_a.Code"></el-input>
            </el-form-item>
            <el-form-item label="类目名称" label-width="100px">
              <el-input v-model="formLabelAlign_a.Name"></el-input>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button
              @click="
                (dialogVisible_a = false),
                  (formLabelAlign_a = {
                    ParentCode: '',
                    ParentCode: '',
                    Code: '',
                    Name: '',
                  }),
                  (tree_click = true)
              "
              >关闭</el-button
            >
            <el-button type="primary" @click="savez()">保存</el-button>
          </span>
        </el-dialog>
        <!-- 弹层结束 -->
        <!-- 表格弹层开始 -->
        <el-dialog
          :title="
            this.flag_b == 1 ? '新增' : this.flag_b == 2 ? '修改' : '未知操作'
          "
          :visible.sync="dialogVisible_b"
          width="40%"
          :before-close="handleClose_b"
          :modal-append-to-body="false"
          :close-on-click-modal="false"
        >
          <el-form label-width="80px" :model="formLabelAlign_b">
            <el-divider>数据结构信息</el-divider>
            <el-form-item
              label="版本号"
              style="width: 45%; display: inline-block"
              label-width="120px"
            >
              <el-input v-model="formLabelAlign_b.Version"></el-input>
            </el-form-item>
            <el-form-item
              label="数据表说明"
              style="width: 45%; display: inline-block"
              label-width="120px"
            >
              <el-input v-model="formLabelAlign_b.FormName"></el-input>
            </el-form-item>
            <el-form-item
              label="数据表"
              style="width: 45%; display: inline-block"
              label-width="120px"
            >
              <el-input v-model="formLabelAlign_b.TableName"></el-input>
            </el-form-item>
            <el-form-item
              label="字段名"
              style="width: 45%; display: inline-block"
              label-width="120px"
            >
              <el-input v-model="formLabelAlign_b.FieldName"></el-input>
            </el-form-item>
            <el-form-item
              label="排序"
              style="width: 45%; display: inline-block"
              label-width="120px"
            >
              <el-input v-model="formLabelAlign_b.Sort"></el-input>
            </el-form-item>
            <el-divider>数据集规范信息</el-divider>
            <el-form-item
              label="内部标识符"
              style="width: 90%; display: inline-block"
              label-width="120px"
            >
              <el-input v-model="formLabelAlign_b.InternalCode"></el-input>
            </el-form-item>
            <el-form-item
              label="临床数据组标识"
              style="width: 45%; display: inline-block"
              label-width="120px"
            >
              <el-input v-model="formLabelAlign_b.DataGroupCode"></el-input>
            </el-form-item>
            <el-form-item
              label="临床数据组"
              style="width: 45%; display: inline-block"
              label-width="120px"
            >
              <el-input v-model="formLabelAlign_b.DataGroupName"></el-input>
            </el-form-item>
            <el-form-item
              label="数据元标识符"
              style="width: 45%; display: inline-block"
              label-width="120px"
            >
              <el-input v-model="formLabelAlign_b.ElementCode"></el-input>
            </el-form-item>
            <el-form-item
              label="数据元名称"
              style="width: 45%; display: inline-block"
              label-width="120px"
            >
              <el-input v-model="formLabelAlign_b.ElementName"></el-input>
            </el-form-item>
            <el-form-item
              label="定义"
              style="width: 90%; display: inline-block"
              label-width="120px"
            >
              <el-input
                type="textarea"
                :rows="2"
                v-model="formLabelAlign_b.Define"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="数据类型"
              style="width: 45%; display: inline-block"
              label-width="120px"
            >
              <!-- <el-input v-model="formLabelAlign_b.DataType"></el-input> -->
              <template>
                <el-select
                  filterable
                  v-model="formLabelAlign_b.DataType"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item
              label="表示格式"
              style="width: 45%; display: inline-block"
              label-width="120px"
            >
              <el-input v-model="formLabelAlign_b.Format"></el-input>
            </el-form-item>
            <el-form-item
              label="允许值"
              style="width: 45%; display: inline-block"
              label-width="120px"
            >
              <el-input v-model="formLabelAlign_b.AllowValue"></el-input>
            </el-form-item>
            <el-divider>数据信息对照</el-divider>
            <el-form-item
              label="值域代码"
              style="width: 45%; display: inline-block"
              label-width="120px"
            >
              <el-input v-model="formLabelAlign_b.CodoCode"></el-input>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="close">关闭</el-button>
            <el-button type="primary" @click="savez_b()">保存</el-button>
          </span>
        </el-dialog>
        <!-- 表格弹层结束 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "AssetCatalog",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      datalist: [],
      // defaultProps: {
      //   children: "children",
      //   label: "label"
      // },
      defaultProps: {
        children: "Child",
        label: "Name",
      },
      isLoading: false,
      isLoading_a: false,
      tableData: [],
      node_items: [],
      page: {
        page: 1,
        limit: 9,
      },
      dialogVisible_a: false,
      formLabelAlign_a: {
        ParentCode: "",
        Code: "",
        Name: "",
      },
      flag_a: null,
      value_a: "",
      idTree: [],
      dialogVisible_b: false,
      formLabelAlign_b: [],
      flag_b: null,
      formLabelAlign_b: {
        Code: "",
        AssetCode: "",
        AssetName: "",
        FormName: "",
        TableName: "",
        FieldName: "",
        DataGroupCode: "",
        DataGroupName: "",
        ElementCode: "",
        ElementName: "",
        Define: "",
        DataType: "",
        Format: "",
        AllowValue: "",
        InternalCode: "",
        Version: "",
        Sort: "",
      },
      value_b: "",
      options: [
        {
          value: "char",
          label: "char",
        },
        {
          value: "date",
          label: "date",
        },
        {
          value: "decimal",
          label: "decimal",
        },
        {
          value: "int",
          label: "int",
        },
        {
          value: "nchar",
          label: "nchar",
        },
        {
          value: "ntext",
          label: "ntext",
        },
        {
          value: "nvarchar",
          label: "nvarchar",
        },
        {
          value: "varchar",
          label: "varchar",
        },
      ],
      tree_click: true,
      AssetName: "",
      AssetCode: "",
      Version: "",
      FormName: "",
      TableName: "",
      Sort: "",
      TotalCount: 0,
      fieldCodes: [],
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
    this.getDatalist();
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    // 获取树数据
    getDatalist() {
      this.isLoading = true;
      this.$get("AssetDict/TreeList?keyword=" + this.value_a).then((res) => {
        if (res.code == 0) {
          this.datalist = res.data;
          this.isLoading = false;
        } else {
          console.log(res.msg);
          this.isLoading = false;
        }
      });
    },
    // 左侧搜索
    search_a() {
      this.page.page = 1;
      this.getDatalist();
      // this.$message({
      //   message: '搜索成功',
      //   type: 'success'
      // });
    },
    // 弹层控制
    addjgTJ(node, data) {
      this.tree_click = false;
      this.idTree = [];
      console.log("新增操作");
      console.log(this.flag_a);
      console.log(node, data);
      this.flag_a = 1;
      this.dialogVisible_a = true;
      this.formLabelAlign_a.ParentCode = data.Code;
      this.formLabelAlign_a.Name_a = data.Name;
      this.idTree.push(data.Id);
    },
    // 编辑
    edit(node, data) {
      this.tree_click = false;
      this.idTree = [];
      console.log("编辑操作");
      console.log(this.flag_a);
      console.log(node, data);
      this.flag_a = 2;
      this.formLabelAlign_a = data;
      this.dialogVisible_a = true;
      this.formLabelAlign_a.ParentCode = data.ParentCode;
      this.formLabelAlign_a.Name_a = node.parent.data.Name;
      // alert(data.$treeNodeId)
      this.idTree.push(data.Id);
    },
    // 删除
    remove(node, data) {
      this.tree_click = false;
      this.$confirm("确定删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((_) => {
          console.log("删除操作");
          console.log(node, data);
          let id = data.Id;
          this.$post("AssetDict/AssetDelete/" + id).then((res) => {
            if (res.code == 0) {
              this.idTree = [];
              this.getDatalist();
              this.idTree.push(data.Id);
              this.$message({
                message: "删除成功",
                type: "success",
              });
            } else if (res.code == -1) {
              this.$message.error(res.msg);
            }
          });
        })
        .catch((_) => {});
    },
    // 保存操作 => 新增/修改
    savez() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let url =
        this.flag_a == 1 ? "AssetDict/AssetCreate" : "AssetDict/AssetUpdate";
      let body = this.formLabelAlign_a;
      this.$post(url, body).then((res) => {
        if (res.code == 0) {
          this.tree_click = true;
          this.getDatalist();
          this.dialogVisible_a = false;
          this.formLabelAlign_a = {
            ParentCode: "",
            Code: "",
            Name: "",
          };
          loading.close();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        } else if (res.code == 1 || res.code == -1) {
          // this.dialogVisible_a = false
          loading.close();
          this.$message.error(res.msg);
        }
      });
    },
    // 获取表格数据
    getTableData() {
      this.isLoading_a = true;
      this.$post(
        "AssetDict/FieldPageList?keyword=" +
          this.value_b +
          "&assetCode=" +
          this.node_items.Code +
          "&page=" +
          this.page.page +
          "&limit=" +
          this.page.limit
      ).then((res) => {
        if (res.code == 0) {
          console.log(res);
          this.tableData = res.data.list;
          this.TotalCount = res.data.TotalCount;
          console.log("总数为");
          console.log(this.TotalCount);
          this.isLoading_a = false;
        }
      });
    },
    // 右侧搜索
    search_b() {
      this.getTableData();
      this.$message({
        message: "搜索成功",
        type: "success",
      });
    },
    // 树传参
    handleNodeClick(data) {
      console.log("点击传参");
      console.log(data);
      this.page.page = 1;
      this.AssetCode = "";
      this.AssetName = "";
      this.node_items = data;
      this.formLabelAlign_b.AssetCode = data.Code;
      this.formLabelAlign_b.AssetName = data.Name;
      this.AssetCode = data.Code;
      this.AssetName = data.Name;
      this.Version = "";
      this.FormName = "";
      this.TableName = "";
      this.formLabelAlign_b.Version = "";
      this.formLabelAlign_b.FormName = "";
      this.formLabelAlign_b.TableName = "";
      this.getTableData();
      console.log("值");
      console.log(this.AssetCode, this.AssetName);
    },
    // 树弹层关闭
    handleClose_a() {
      this.dialogVisible_a = false;
      this.formLabelAlign_a = {
        ParentCode: "",
        ParentCode: "",
        Code: "",
        Name: "",
      };
      this.idTree = [];
    },
    // 表格弹层关闭
    handleClose_b() {
      this.close();
    },
    // 右侧表格

    // 表格弹层关闭
    close() {
      this.dialogVisible_b = false;
      this.Version = this.formLabelAlign_b.Version;
      this.FormName = this.formLabelAlign_b.FormName;
      this.TableName = this.formLabelAlign_b.TableName;
      this.Sort = this.formLabelAlign_b.Sort;
      this.formLabelAlign_b = {
        Code: "",
        AssetCode: "",
        AssetName: "",
        FormName: "",
        TableName: "",
        FieldName: "",
        DataGroupCode: "",
        DataGroupName: "",
        ElementCode: "",
        ElementName: "",
        Define: "",
        DataType: "",
        Format: "",
        AllowValue: "",
        InternalCode: "",
        Version: "",
        Sort: "",
      };
      // this.formLabelAlign_b.AssetCode = this.AssetCode;
      // this.formLabelAlign_b.AssetName = this.AssetName;
      // this.formLabelAlign_b.Version = this.Version;
      // this.formLabelAlign_b.FormName = this.FormName;
      // this.formLabelAlign_b.TableName = this.TableName;
      // this.formLabelAlign_b.Sort = this.Sort;
    },
    // 保存操作  新增/编辑
    savez_b() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let url =
        this.flag_b == 1 ? "AssetDict/FieldCreate" : "AssetDict/FieldUpdate";
      let body = this.formLabelAlign_b;
      this.$post(url, body).then((res) => {
        if (res.code == 0) {
          this.getTableData();
          this.close();
          loading.close();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        } else if (res.code == -1) {
          this.close();
          this.$message.error(res.msg);
        }
      });
    },
    // 右侧表单控制弹层显示隐藏
    open_b() {
      if (
        this.formLabelAlign_b.AssetCode == "" ||
        this.formLabelAlign_b.AssetName == ""
      ) {
        this.$message({
          message: "请选择资产类目",
          type: "warning",
        });
        return;
      }
      this.$get("AssetDict/FieldSort?assetCode=" + this.AssetCode).then(
        (res) => {
          if (res.code == 0) {
            this.formLabelAlign_b.Sort = res.data;
          } else if (res.code == -1) {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        }
      );

      this.dialogVisible_b = true;
      this.flag_b = 1;
    },
    // 修改操作
    edit_b(row) {
      this.flag_b = 2;
      var info = JSON.stringify(row);
      this.formLabelAlign_b = JSON.parse(info);
      this.dialogVisible_b = true;
    },
    // 删除操作
    delete_b(code) {
      this.$confirm("确定删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((_) => {
          this.$post("AssetDict/FieldDelete?code=" + code).then((res) => {
            if (res.code == 0) {
              this.getTableData();
              this.$message({
                message: "删除成功",
                type: "success",
              });
            } else if (res.code == -1) {
              this.$message({
                message: res.msg,
                type: "warning",
              });
            }
          });
        })
        .catch((_) => {});
    },
    change_list(val) {
      // 表格页码切换事件
      this.page.page = val;
      this.getTableData();
    },
    rowClass(row, index) {
      if (row.row.MatchStatus == 0) {
        return { "background-color": "#faf9d2" };
      }
    },
    handleSelectionChange(val) {
      let arr = [];
      for (var i in val) {
        arr.push(val[i].Code);
      }
      console.log("选中数据");
      console.log(arr);
      this.fieldCodes = arr;
    },
    toYes() {
      this.$post("AssetDict/FieldHandMatch", this.fieldCodes).then((res) => {
        if (res.code == 0) {
          this.getTableData();
          this.$message({
            message: "操作成功",
            type: "success",
          });
        } else if (res.code == -1) {
          this.$message({
            message: res.msg,
            type: "warning",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss">
.AssetCatalog {
  .display {
    display: inline-block;
  }
  .title_text {
    margin: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #6bb1ec;
  }
  // .AssetCatalog {
  //   height: 900px;
  // }
  .dLeftMain {
    position: absolute;
    width: 370px;
    top: 45px;
    left: 0;
    bottom: 20px;
    border-right: 1px solid #ddd;
    overflow: auto;
    padding-top: 8px;
  }
  .dRightMain {
    // width: 1200px;
    height: 500px;
    margin-left: 370px;
    padding: 20px 0 0 20px;
  }
  .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 0;
    margin-top: -15px;
    margin-bottom: 15px;
  }
  .sum {
    position: absolute;
    left: 50%;
    bottom: 3%;
    z-index: 99;
  }
  .el-scrollbar .el-scrollbar__wrap {
    overflow-x: auto;
  }
  .el-select-dropdown .el-scrollbar .el-scrollbar__wrap {
    overflow: scroll !important;
  }
  .tree {
    overflow-y: hidden;
    overflow-x: scroll;
    width: 80px;
    height: 500px;
  }
  .el-table__body-wrapper {
    overflow-y: auto;
    overflow-x: auto;
    z-index: 1;
  }
  .treeSty {
    width: 100%;
    height: 100%;
    overflow-x: auto;
  }
  .el-scrollbar .el-scrollbar__wrap {
    overflow-x: auto;
  }
  .el-tree > .el-tree-node {
    min-width: 100%;
    display: inline-block;
  }
  @media screen and (max-width: 1300px) {
    .sum {
      position: absolute;
      left: 50%;
      bottom: 0%;
      z-index: 99;
    }
  }
}
</style>
